<template>
  <!--  个性特征      -->
  <view
    :class="type == 'disadvantage'? 'allContainer-disadvantage' : 'allContainer'"
    :style="[{ backgroundColor: isShowBgColor ? '#D9E2CC' : '#00000000' }]"
  >
    <view class="maskBox" />
    <image
      :src="cloudImg"
      :style="[
        { width: '158rpx' },
        { height: '138rpx' },
        { position: 'absolute' },
        { right: '0' },
        { top: '-30rpx' },
      ]"
    />
    <image class="textImg" :src="partTextImgUrl" />
    <image class="imgFloatRight" :src="imgPavilion" v-if="type == 'disadvantage'" />
    <view
      class="contentView"
      :style="[{ paddingRight: '32rpx' }, { paddingLeft: '32rpx' }]"
    >
      <view :style="[{ height: '204rpx' }]">
        <view class="contentBack">
          <view
            :style="[
              { marginTop: '33rpx' },
              { display: 'flex' },
              { alignItems: 'center' },
            ]"
          >
            <view class="blackBox"> </view>
            <template v-if="type=='disadvantage'">
              <span class="smallTitleGreen"> 劣势 </span>
              <image class="sadImg" :src="sadImg"></image>
            </template>
            <template v-else>
              <span class="smallTitleGreen"> 优势 </span>
              <image class="smileImg" :src="smileImg"></image>
            </template>
          </view>

          <view class="onePartContent"
            ><view class="blueBox"></view
            ><view style="flex: 1">{{ lockInfoObj.desc }}</view></view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // components: {},
  props: {
    type: {
      type: String,
      default: "",
    },
    itemIndex: {
      type: Number,
      default: 0,
    },

    isShowBgColor: {
      type: Boolean,
      default: false,
    },

    textImgWidthRpx: {
      type: Number,
      default: 271,
    },

    textImgHeightRpx: {
      type: Number,
      default: 38,
    },

    contentPaddingLeftRpx: {
      type: Number,
      default: 48,
    },

    contentPaddingRightRpx: {
      type: Number,
      default: 200,
    },

    partTextImgUrl: {
      type: String,
      default:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/title3.png",
    },

    lockInfoObj: {
      type: Object,
      default() {
        return {
          title: [
            { color: "1", label: "毕方教导你" },
            { color: "2", label: "调控热情赤焰，磨炼心气" },
          ],
          desc: ["难以独自工作，尤其是长时间的工作"],
        };
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
      cloudImg:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part3_2.png",
      smileImg: this.$imgBaseSelf + "career/careerAssessNew/smile.png",
      imgPavilion:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/he.png",
      sadImg: this.$imgBaseSelf + "career/careerAssessNew/sad.png",
    };
  },
  watch: {
    itemIndex: {
      handler(val) {
        this.currentIndex = val;
      },
      deep: true, // 深度监听
      immediate: true, // 初始化的时候立刻执行一次
    },
  },
  onReady() {},

  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".allContainer")
      .boundingClientRect((rect) => {
        console.log("rect.height = " + rect.height);
        this.$emit("listenRect", rect, this.currentIndex);
      })
      .exec();
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.allContainer {
  position: relative;
  height: 500rpx;
  padding-bottom: 60rpx;
  width: 100%;
  // background-size: 100% auto;
  // background-image: url($img-base + "career/careerAssessResult/bg_part1.png");
  // background-repeat: no-repeat;
  //background-color: #D9E2CC;
}

.allContainer-disadvantage {
  position: relative;
  height: 500rpx;
  padding-bottom: 60rpx;
  width: 100%;
  background-size: 169rpx 706rpx;
  background-image: url($img-base + "career/careerAssessResult/part4_bamboo.png");
  background-repeat: no-repeat;
  background-position: top left;
  padding-bottom: 60rpx;
  text-align: -webkit-right;

  .maskBox {
    bottom: 90rpx;
    border-bottom: 1px solid #c6d8c0;
    background-clip: padding-box;
  }

  .contentBack {
    background: linear-gradient(
      to bottom,
      #bbeaf8 0%,
      #eefbf0 50rpx,
      #f6f4df 80rpx,
      #f9f7e5 100%
    );
    border-radius: 15rpx 0 15rpx 15rpx;
  }

  .onePartContent {
    text-align: left;
  }

  .blueBox {
    background: linear-gradient(to right, #76a3ee 0%, #f9f7e5 100%);
  }
}

.maskBox {
  width: 750rpx;
  height: 410rpx;
  position: absolute;
  //top: 38rpx;
  bottom: 60rpx;
  z-index: 2;
  background-image: linear-gradient(#00000000, #c6d8c0);
}
.arrowYellow {
  width: 36rpx;
  height: 20rpx;
  margin-top: 16rpx;
  margin-right: 14rpx;
}
.contentView {
  z-index: 1;
  position: absolute;
  width: 100%;
  // padding-left: 48rpx;
  // padding-right: 200rpx;
  //  background-size: 380rpx 277rpx;
  // background-image: url($img-base + "career/careerAssessResult/img_pavilion.png");
  // background-repeat: no-repeat;
  //background-position: top right;
}

.textImg {
  height: 130rpx;
  width: 584rpx;
  image-rendering: -webkit-optimize-contrast;
  z-index: 9;
  position: relative;
}
.blackBox {
  content: "";
  width: 10rpx;
  max-width: 10rpx;
  height: 38rpx;
  margin-top: 6rpx;
  margin-right: 20rpx;
  background: #000;
  color: #000;
  font-size: 26rpx;
}
.contentBack {
  position: relative;
  width: 100%;
  margin-top: -10rpx;
  background: linear-gradient(
    to bottom,
    #bff1b4 0%,
    #e6fad9 50rpx,
    #f6f4df 80rpx,
    #f9f7e5 100%
  );
  padding: 20rpx 0 100rpx 0;
  border-radius: 0 15rpx 15rpx 15rpx;
}
.smallTitleGreen {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000;
  //line-height: 120rpx;
}

.smallTitleRed {
  font-size: 34rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ed5c22;
  //	line-height: 120rpx;
}

.onePartContent {
  font-size: 30rpx;
  padding-right: 50rpx;
  color: #555555;
  padding: 0 20rpx;
  margin-top: 40rpx;
  line-height: 37rpx;
  letter-spacing: 0rpx;
  display: flex;
}
.sadImg {
  width: 48rpx;
  height: 48rpx;
  margin-left: 14rpx;
}
.smileImg {
  width: 48rpx;
  height: 48rpx;
  margin-left: 14rpx;
}
.blueBox {
  width: 26rpx;
  height: 20rpx;
  background: linear-gradient(to right, #88c881 0%, #f9f7e5 100%);
  margin-top: 10rpx;
  margin-right: 10rpx;
}
.imgFloatRight {
  position: absolute;
  width: 180rpx;
  height: 170rpx;
  right: 0rpx;
  top: 115rpx;
  z-index: 9;
}
.contentDisc {
  flex: 1;
  width: 0;
  white-space: normal;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*设置省略号在容器第2行文本后*/
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
